<template>
     <div class="login-wrapper">
      <div class="content">
        <h2>后台管理系统</h2>
        <div class="demo-input-suffix">
          账号：
          <el-input placeholder="请输入账号" v-model="name"> </el-input>
        </div>
        <div class="demo-input-suffix">
          密码：
          <el-input placeholder="请输入密码" type="password" v-model="password"> </el-input>
        </div>
        <el-button @click.native="login">登录</el-button>
      </div>
    </div>
</template>
<script>
import api from '../../../api/Basicpath/index'
export default {
  data(){
    return{
      name:'yu',
      password:'yu12346'
    }
  },
  methods: {
    login() {
      let name = this.name
      let password = this.password
      this.$axios.post(`${api}/gamemall/login`,{name:name,password:password})
      .then( res => {
        if(res.code === 200){
          localStorage.setItem('sessionId',res.obj[0].sessionId);
          localStorage.setItem('currentId',res.obj[0].id);
          localStorage.setItem('userInfo', JSON.stringify(res.obj[0]));
          this.$router.push({ path: "/Chart" });
        }else if(res.code === 500){
          this.$message({
            message: res.msg || '登录失败',
            type: 'warning'
          })
        }
      })
      .catch( err =>{
        this.$message({
            message: err.msg || '请求异常',
            type: 'warning'
          })
      })
    }
  }
};
</script>
<style scoped>
.login-wrapper{
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

 .content{
  width: 40%;
  padding: 30px;
  /* background-color:#efefef; */
  border-radius: 2px;
  color: #999;
  position: absolute;
  top: 30%;
}
    
.content h2{
  text-align :center;
  font-size: 24px;
  padding:0 0 30px 0;
}
.el-input{
  width: 80%!important;
}
  
.demo-input-suffix{
  width: 60%;
  padding: 0 0 26px 0;
  margin: 0 auto;
}

     
.el-button{
  display: block;
  margin: 0 auto;
  width: 60%;
  background-color: #4bb39b!important;
  color: #ffffff;
  letter-spacing: 1em;
}

</style>
